console.log("pix : debug");
const scriptUrl = new URL(document.currentScript.src);
const urlParams = new URLSearchParams(new URL(scriptUrl).search);
const shop = urlParams.get("shop");
var varientid = urlParams.get("varientid");
var pix_product_id = urlParams.get("productid");
//const addtocartstring = urlParams.get("addtocartstring");
const addtocartstring = "Add to cart";
var isListenToInput = false;

var pix_host = window.Shopify.shop;

console.log("pix : script url : " + scriptUrl);
console.log("pix : script urlParams : " + urlParams);
console.log("pix : script shop : " + shop);
console.log("pix : script varientid : " + varientid);
console.log("pix : script pix_product_id : " + pix_product_id);
console.log("pix : script addtocartstring : " + addtocartstring);
//var pix_product = window.ShopifyAnalytics.meta.product;
var pix_preorder;
var selectedVariant;
var listOfOnVariants = [];

runpixpreorderapp();

function runpixpreorderapp() {
  var pix_url =
    "https://stingray-app-n99th.ondigitalocean.app/getpreorder?shop=" +
    pix_host +
    "&productid=" +
    pix_product_id;

  fetch(pix_url)
    .then((response) => response.json())
    .then((result) => {
      pix_preorder = result.preorder;
      // preorder.buttonText
      getaddtocartbtn(varientid, addtocartstring, pix_preorder);
    });
}

function getaddtocartbtn(varientid, btnaddtocartstring, preorder) {
  const inputs = document.getElementsByTagName("input");
  // get select inputs and add them to inputs
  const selects = document.getElementsByTagName("select");
  // Convert the collections to arrays
  const inputArr = Array.from(inputs);
  const selectArr = Array.from(selects);
  // Concatenate the arrays
  const allInputs = inputArr.concat(selectArr);
  for (var j = 0; j < allInputs.length; j++) {
    if (allInputs[j].value == varientid) {
      // console.log(inputs[j].value)
      // listent to this input if change value
      if (isListenToInput == false) {
        listentoinputs(allInputs[j]);
        isListenToInput = true;
      }

      const form = allInputs[j].form;
      const buttons = form.getElementsByTagName("button");
      const btninpusts = form.getElementsByTagName("input");
      // Convert the collections to arrays
      const buttonArr = Array.from(buttons);
      const btninpustArr = Array.from(btninpusts);
      // Concatenate the arrays
      const allbuttons = buttonArr.concat(btninpustArr);

      for (var i = 0; i < allbuttons.length; i++) {
        if (
          allbuttons[i].textContent.includes(btnaddtocartstring) ||
          allbuttons[i].value == btnaddtocartstring
        ) {
          //console.log(buttons[i])
          // return buttons[i]

          // check if show ==  true
          if (preorder.show == true) {
            // check if current varient show == true
            preorder.selectedProducts.map((selectedProduct) => {
              selectedProduct.variants.map((variant) => {
                console.log(
                  "variant.id" + variant.id + "varientid : " + varientid
                );
                if (variant.toggel == true && variant.id == varientid) {
                  render(allbuttons[i], preorder.buttonText, form);
                }
              });
            });
          }
        }
      }
    }
  }
}
function render(addtocartbtn, preorderstring, form) {
  // edit text in button to preorder text
  var btnaddtocart = addtocartbtn;
  var addToCartText = btnaddtocart.innerText.toLocaleLowerCase();
  var newElement = btnaddtocart.innerHTML
    .toLocaleLowerCase()
    .replaceAll(addToCartText, preorderstring);
  btnaddtocart.innerHTML = newElement;
  // add css style to button
  addtocartbtn.style =
    "background-color: " +
    pix_preorder.colorBackground +
    "; border: " +
    pix_preorder.borderWidth +
    "px solid " +
    pix_preorder.colorBorder +
    "; padding-top: " +
    pix_preorder.paddingTop +
    "px; padding-bottom: " +
    pix_preorder.paddingBottom +
    "px; color: " +
    pix_preorder.colorFont +
    "; border-radius: " +
    pix_preorder.borderRadius +
    "px;";
  // add label
  if (pix_preorder.preOrderPlacment == "Above") {
    addtocartbtn.parentElement.innerHTML =
      "<span  id='--pix-preorder' style='text-align: center;display: block;'>" +
      pix_preorder.preOrderMessage +
      "</span>" +
      addtocartbtn.outerHTML;
  }
  if (pix_preorder.preOrderPlacment == "Below") {
    addtocartbtn.parentElement.innerHTML =
      addtocartbtn.outerHTML +
      "<span id='--pix-preorder' style='text-align: center;display: block;'>" +
      pix_preorder.preOrderMessage +
      "</span>";
  }

  if (document.getElementById("pixpreorderinp") == null) {
    if (pix_preorder.sellingPLanId != "0") {
      // add sellingplan id input varient
      console.log("op");
      console.log(form);
      // Create the input element
      const input = document.createElement("input");
      input.setAttribute("type", "hidden");
      input.setAttribute("name", "selling_plan");
      input.setAttribute("id", "pixpreorderinp");
      input.setAttribute("value", pix_preorder.sellingPLanId);
      // Append the input element to the form
      form.appendChild(input);
    }
  } else {
    if (pix_preorder.sellingPLanId != "0") {
      document.getElementById("pixpreorderinp").value ==
        pix_preorder.sellingPLanId;
    }
  }
}

function listentoinputs(element) {
  element.addEventListener("change", (event) => {
    const newValue = event.target.value;
    // set the new varient id
    varientid = newValue;
    // clear my past sellingplan id input
    if (document.getElementById("pixpreorderinp") != null) {
      document.getElementById("pixpreorderinp").remove();
    }
    runpixpreorderapp();
    console.log(`The value of the element has changed to ${newValue}`);
    // check if varient have sellingplan id then insert input if not delete input
  });
}